<template>
  	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="elderly-basic-info-page">


    <!-- 个人信息卡片 -->
    <view class="info-card">
      <!-- 头像与基本信息 -->
      <view class="avatar-info">
        <view class="avatar-container">
          <view class="avatar" :style="{ backgroundColor: elderlyInfo.gender === '男' ? '#1890FF' : '#F53F3F' }">
            <uni-icons type="user" size="40" color="#fff"></uni-icons>
          </view>
          <!-- <view class="age-tag">{{ elderlyInfo.age }}岁</view> -->
        </view>
        
        <view class="basic-info">
          <text class="name text13">{{ elderlyInfo.name }}</text>
          <text class="gender-relation text12">{{ elderlyInfo.gender }} · {{ elderlyInfo.relation }}</text>
        </view>
      </view>

      <!-- 详细信息列表 -->
      <view class="detail-list">
        <view class="detail-item">
          <uni-icons type="idcard" size="16" color="#666"></uni-icons>
          <text class="item-label text11">身份证号</text>
          <text class="item-value text11">{{ formatIdCard(elderlyInfo.idCard) }}</text>
        </view>
		<view class="detail-item">
		  <uni-icons type="home" size="16" color="#666"></uni-icons>
		  <text class="item-label text11">年龄</text>
		  <text class="item-value text11">{{ elderlyInfo.age }}</text>
		</view>
        <view class="detail-item">
          <uni-icons type="phone" size="16" color="#666"></uni-icons>
          <text class="item-label text11">联系电话</text>
          <text class="item-value text11" style="color: #4d80f0;" @click="makeCall(elderlyInfo.phone)">{{ elderlyInfo.phone }}</text>
       
        </view>
        <view class="detail-item">
          <uni-icons type="map-pin" size="16" color="#666"></uni-icons>
          <text class="item-label text11">居住地址</text>
          <text class="item-value text11">{{ elderlyInfo.address }}</text>
        </view>
        <view class="detail-item">
          <uni-icons type="home" size="16" color="#666"></uni-icons>
          <text class="item-label text11">居住状况</text>
          <text class="item-value text11">{{ elderlyInfo.livingStatus }}</text>
        </view>
		
        <view class="detail-item">
          <uni-icons type="education" size="16" color="#666"></uni-icons>
          <text class="item-label text11">文化程度</text>
          <text class="item-value text11">{{ elderlyInfo.education }}</text>
        </view>
      </view>
    </view>

    <!-- 健康状况 -->
    <view class="health-status">
      <view class="section-title">
        <text class="title-text text13">健康状况</text>
        <text class="update-time text12">最近更新：{{ elderlyInfo.healthUpdateTime }}</text>
      </view>

      <!-- 健康标签 -->
      <view class="health-tags">
        <view 
          class="tag-item" 
          v-for="(tag, index) in elderlyInfo.healthTags" 
          :key="index"
          :style="{ backgroundColor: getTagColor(tag.type) }"
        >
          <uni-icons :type="tag.icon" size="14" color="#fff" class="tag-icon"></uni-icons>
          <text class="tag-text text12">{{ tag.name }}</text>
        </view>
      </view>

      <!-- 健康概况 -->
      <view class="health-summary">
        <view class="summary-item">
          <text class="summary-label text11">基础疾病：</text>
          <text class="summary-value text11">{{ elderlyInfo.basicDisease || '无' }}</text>
        </view>
        <view class="summary-item">
          <text class="summary-label text11">用药情况：</text>
          <text class="summary-value text11">{{ elderlyInfo.medication || '无' }}</text>
        </view>
        <view class="summary-item">
          <text class="summary-label text11">过敏史：</text>
          <text class="summary-value text11">{{ elderlyInfo.allergy || '无' }}</text>
        </view>
      </view>
    </view>

    <!-- 紧急联系人 -->
    <view class="emergency-contact">
      <view class="section-title">
        <text class="title-text text13">紧急联系人</text>
        <text class="tips text12">点击可直接联系</text>
      </view>

      <view class="contact-card">
        <view class="contact-avatar">
          <uni-icons type="contact" size="32" color="#fff"></uni-icons>
        </view>
        <view class="contact-info">
          <text class="contact-name text13">{{ elderlyInfo.emergencyContact.name }}</text>
          <text class="contact-relation text11">{{ elderlyInfo.emergencyContact.relation }}</text>
          <text class="contact-phone text11">{{ elderlyInfo.emergencyContact.phone }}</text>
        </view>
        <view class="contact-actions">
          <button class="action-btn call" @click="makeCall(elderlyInfo.emergencyContact.phone)">
            <uni-icons type="phone" size="20" color="#fff"></uni-icons>
          </button>
          <button class="action-btn message" @click="sendMessage(elderlyInfo.emergencyContact.phone)">
            <uni-icons type="message" size="20" color="#fff"></uni-icons>
          </button>
        </view>
      </view>
    </view>

    
  </view>
</template>

<script setup>
import { ref } from 'vue';
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
		const fontSizeStore = useFontSizeStore();

// 长者基本信息数据
const elderlyInfo = ref({
  name: '张建国',
  gender: '男',
  age: 68,
  relation: '父亲', // 与当前用户关系
  idCard: '110101195601234567',
  phone: '13800138000',
  address: '北京市朝阳区建国路88号院1号楼3单元501',
  liveStatus: '与家人同住',
  education: '高中',
  
  // 健康相关信息
  healthUpdateTime: '2024-09-01',
  healthTags: [
    { name: '高血压', type: 'warning', icon: 'alert' },
    { name: '糖尿病', type: 'danger', icon: 'exclamation' },
    { name: '定期服药', type: 'info', icon: 'info' }
  ],
  basicDisease: '原发性高血压2级、2型糖尿病',
  medication: '硝苯地平控释片（每日1次）、二甲双胍（每日3次）',
  allergy: '青霉素过敏',
  
  // 紧急联系人
  emergencyContact: {
    name: '张小明',
    relation: '儿子',
    phone: '13900139000'
  }
});

// 格式化身份证号（脱敏处理）
const formatIdCard = (id) => {
  if (!id) return '';
  return id.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3');
};

// 根据标签类型获取背景色
const getTagColor = (type) => {
  const colorMap = {
    warning: 'rgba(255, 125, 0, 0.2)', // 警告-橙色
    danger: 'rgba(245, 63, 63, 0.2)',  // 危险-红色
    info: 'rgba(24, 144, 255, 0.2)',   // 信息-蓝色
    success: 'rgba(0, 180, 42, 0.2)'   // 成功-绿色
  };
  return colorMap[type] || 'rgba(134, 144, 156, 0.2)';
};

// 导航返回
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 编辑信息
const handleEdit = () => {
  uni.navigateTo({
    url: '/pages/editElderlyInfo/editElderlyInfo'
  });
};

// 拨打电话
const makeCall = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone,
    fail: (err) => {
      console.error('拨打电话失败：', err);
      uni.showToast({ title: '拨打电话失败', icon: 'none' });
    }
  });
};

// 发送短信
const sendMessage = (phone) => {
  uni.openSMS({
    phoneNumber: phone,
    content: `【提示】${elderlyInfo.value.name}的情况需要关注，请及时联系。`
  });
};

// 跳转到健康记录
const gotoHealthRecord = () => {
  uni.navigateTo({
    url: '/pages/healthRecord/healthRecord'
  });
};

// 跳转到预约服务
const gotoAppointment = () => {
  uni.navigateTo({
    url: '/pages/appointmentService/appointmentService'
  });
};
</script>

<style scoped lang="scss">
$primary: #1890FF;
$success: #00B42A;
$warning: #FF7D00;
$danger: #F53F3F;
$gray: #86909C;
$light-gray: #F2F3F5;
$border-gray: #EEEEEE;

// 页面基础样式
.elderly-basic-info-page {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 80px; // 为底部按钮留出空间
  padding:30rpx;
}


// 信息卡片样式
.info-card {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 20px 16px;
  // margin: 16px;
}

// 头像与基本信息样式
.avatar-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid $border-gray;

  .avatar-container {
    position: relative;
    margin-right: 16px;

    .avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .age-tag {
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: $primary;
      color: #FFFFFF;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 12px;
      border: 2px solid #FFFFFF;
    }
  }

  .basic-info {
    .name {
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      display: block;
      margin-bottom: 4px;
    }

    .gender-relation {
      font-size: 14px;
      color: $gray;
    }
  }
}

// 详细信息列表样式
.detail-list {
  .detail-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid $border-gray;

    &:last-child {
      border-bottom: none;
    }

    .item-label {
      font-size: 13px;
      color: $gray;
      width: 80px;
      margin-left: 8px;
    }

    .item-value {
      font-size: 14px;
      color: #333333;
      flex: 1;
      line-height: 1.5;
    }

    .call-btn {
      background: transparent;
      border: none;
      padding: 4px;
      line-height: normal;
    }
  }
}

// 通用区域标题样式
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .title-text {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }

  .update-time, .tips {
    font-size: 12px;
    color: $gray;
  }
}

// 健康状况区域样式
.health-status {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  margin: 30rpx 0;
}

// 健康标签样式
.health-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;

  .tag-item {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;

    .tag-icon {
      margin-right: 6px;
    }

    .tag-text {
      font-size: 13px;
      color: #333333;
    }
  }
}

// 健康概况样式
.health-summary {
  .summary-item {
    display: flex;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .summary-label {
      font-size: 13px;
      color: $gray;
      width: 80px;
    }

    .summary-value {
      font-size: 14px;
      color: #333333;
      flex: 1;
      line-height: 1.5;
    }
  }
}

// 紧急联系人区域样式
.emergency-contact {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  margin: 30rpx 0;
}

// 联系人卡片样式
.contact-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: $light-gray;
  border-radius: 8px;

  .contact-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: $primary;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
  }

  .contact-info {
    flex: 1;

    .contact-name {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      display: block;
      margin-bottom: 4px;
    }

    .contact-relation {
      font-size: 13px;
      color: $gray;
      display: block;
      margin-bottom: 2px;
    }

    .contact-phone {
      font-size: 14px;
      color: #333333;
    }
  }

  .contact-actions {
    display: flex;
    gap: 10px;

    .action-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      padding: 0;
      line-height: normal;
    }

    .call {
      background-color: $primary;
    }

    .message {
      background-color: $success;
    }
  }
}

// 底部操作按钮样式
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 12px 16px;
  background-color: #FFFFFF;
  border-top: 1px solid $border-gray;

  .action-button {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    margin: 0 6px;
  }

  .health-record {
    background-color: $primary;
  }

  .appointment {
    background-color: $success;
  }

  .btn-text {
    margin-left: 6px;
  }
}
</style>
    